<template>
    <div class="list" ref="list">
        <div class="listhd">
            <div class="listhdc">
                <h4>
                    播放列表(
                    <span class="play-count">{{playListDataFromDataBase.length }}</span>
                    )
                </h4>
                <a href="javascript:;" class="addall">
                    <span class="ico ico-add"></span>
                    收藏全部
                </a>
                <span class="line"></span>
                <a href="javascript:;" class="clear">
                    <span class="ico icn-del"></span>
                    清除
                </a>
                <p class="lytit f-ff0 f-thide">{{ currentPlayMusic && currentPlayMusic.name }}</p>
                <span class="close">关闭</span>
            </div>
        </div>
        <div class="listbd" ref="listbd">
            <img class="imgbg" src="/src/assets/play_menu_bg/boys_lie.jpg" style="top:-360px">
            <div class="msk"></div>
            <div class="listbdc" ref="listbdc">
                <ul class="clear-block" ref="totalMenuElem">
                    <li :class="currentMusicIndex == index ? 'z-sel' : ''" :data-id="item.id"
                        @click="musicItemSelectHandler(index)" v-for="(item, index) in playListDataFromDataBase"
                        key="index">
                        <div class="col col-1">
                            <div class="playicn"></div>
                        </div>
                        <div class="col col-2">{{ item.music.name }}</div>
                        <div class="col col-3">
                            <div class="icns">
                                <i class="ico icn-del" title="删除" :data-id="item.music.id"
                                    @click="deletePlaylistHandler($event,item.id,index)">删除</i>
                                <i class="ico ico-dl" title="下载" :data-id="item.music.id">下载</i>
                                <i class="ico ico-share" title="分享" :data-id="item.music.id">分享</i>
                                <i class="ico ico-add" title="收藏" :data-id="item.music.id">收藏</i>
                            </div>
                        </div>
                        <div class="col col-4">
                            <span title="">
                                <template v-for="(artist, index) in item.music.artists" key="index">
                                    <a :href="artist.artistAddress">{{ artist.name }}</a>
                                    <span v-if="index < item.music.artists.length - 1">/</span>
                                </template>
                            </span>
                        </div>
                        <div class="col col-5">{{ item.music.playtime }}</div>
                        <div class="col col-6">
                            <a href="/discover/toplist?id=3779629&amp;_hash=songlist-2686958558"
                                class="ico ico-src"></a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="bline" ref="bline">
                <span class="scrol" ref="slider" hidefocus="true" style="display: block; top: 0"></span>
            </div>
            <div class="ask" @click="askClickHandler">
                <a class="ico ico-ask"></a>
            </div>
            <div class="upload" v-show="isShowReport">
                <a href="/lyric/report?id=2686958558">报错</a>
            </div>
            <div class="msk2"></div>
            <div class="listlyric" ref="listlyric">

                <p :class="currentPlayLyricIndex == index ? 'z-sel' : ''" :data-time="lyric.time"
                    v-for="(lyric, index) in currentPlayMusic ? currentPlayMusic.lyrics : []" key="index">
                    {{ lyric.content }}
                    <br />
                    {{ lyric.translation }}
                </p>


            </div>
            <div class="bline bline-1" ref="lyricBline">
                <span class="scrol scrol-1" hidefocus="true" style="display: block; top: 0" ref="lyricSlider"></span>
            </div>
        </div>
    </div>
</template>
<script setup>

import { computed, inject, onMounted, onUpdated, provide, reactive, ref, watch } from "vue";
import { useMusicStore } from "../stores/music";
import { reqDeletePlayList, reqMusic } from "../request/api";
import { nextTick } from "vue";
defineExpose({
    caculateLyricUIState,
})
const currentPlayMusic = inject('currentPlayMusic')
const currentMusicIndex = inject('currentMusicIndex');
const currentPlayTime = inject('currentPlayTime');

const propValues = defineProps({
    lyricData: Object,
    playListData: Array,
    currentPlayTime: Number
})

const musicStore = useMusicStore()

const playListDataFromDataBase = ref([]);



const deletePlaylistHandler = async ($event,id,index) => {
    $event.stopPropagation();
    try {
        await reqDeletePlayList(id);
        await musicStore.fetchPlayList();
        if (currentMusicIndex.value > index) {
            currentMusicIndex.value--; 
            return
        }
        else if(currentMusicIndex.value < index) return;
        if(musicStore.play_list_map_table.length <= 0) return currentPlayMusic.value = null;
        currentPlayMusic.value = await reqMusic(musicStore.play_list_map_table[currentMusicIndex.value]);
    } catch (e) {
        console.error(e);
    }

}

const currentPlayLyricIndex = computed(() => {
    let i = 0;
    while (currentPlayMusic.value && i < currentPlayMusic.value.lyrics.length && currentPlayTime.value >= currentPlayMusic.value.lyrics[i].time) i++;
    return i - 1;
})

const isShowReport = ref(false);
const lyrics = propValues.lyricData.lyrics;



const slider = ref();
const listbd = ref();
const listbdc = ref();
const bline = ref();
const totalMenuElem = ref();
const listlyric = ref();
const lyricBline = ref();
const lyricSlider = ref()




const askClickHandler = () => {
    isShowReport.value = !isShowReport.value;
}

const musicItemSelectHandler = async (index) => {
    currentMusicIndex.value = index;
    currentPlayMusic.value = await reqMusic(musicStore.play_list_map_table[index]);
}





let totalMenuElemHeight;
let listbdHeight;
let blineHeight;
let lyricBlineHeight;
let sliderHeight;
let lyricSliderHeight;


let effientBlineHeight;
let effientLyricBlineHeight;
let halfSliderHeight;
let halfLyricSliderHeight;

let lyricSliderStyleTop = 0;
let sliderStyleTop = 0;

let lyricPs;
let lyricPhs;
let totalLyricContentHeight;

watch(() => musicStore.$state.play_list, function () {
    playListDataFromDataBase.value = musicStore.$state.play_list;

    nextTick(() => {
        caculatePlayItemsUIState();
    })
})

function caculateLyricUIState() {
    lyricPs = listlyric.value.getElementsByTagName('p');
    lyricPhs = [...lyricPs].map((item) => {
        return parseFloat(getComputedStyle(item).getPropertyValue('height'));
    })

    totalLyricContentHeight = lyricPhs.reduce((pre, cur) => {
        return pre + cur;
    }, 0);
    lyricBlineHeight = parseInt(getComputedStyle(lyricBline.value).getPropertyValue('height'));
    lyricSliderHeight = totalLyricContentHeight <= lyricBlineHeight ? lyricBlineHeight : lyricBlineHeight * (lyricBlineHeight / totalLyricContentHeight);
    effientLyricBlineHeight = lyricBlineHeight - lyricSliderHeight;
    halfLyricSliderHeight = lyricSliderHeight / 2;

    lyricSlider.value.style.height = lyricSliderHeight + 'px';
}



function caculatePlayItemsUIState() {

    totalMenuElemHeight = parseFloat(getComputedStyle(totalMenuElem.value).getPropertyValue('height'));
    console.log(getComputedStyle(totalMenuElem.value).getPropertyValue('height')); //test
    listbdHeight = parseInt(getComputedStyle(listbd.value).getPropertyValue('height'))
    blineHeight = parseInt(getComputedStyle(bline.value).getPropertyValue('height'));
    
    sliderHeight = totalMenuElemHeight <= blineHeight ? blineHeight : blineHeight * (blineHeight / totalMenuElemHeight);
    

    effientBlineHeight = blineHeight - sliderHeight;
    
    halfSliderHeight = sliderHeight / 2;

    slider.value.style.height = sliderHeight + 'px';
}
onMounted(() => {

    caculatePlayItemsUIState();
    caculateLyricUIState();


    function mousemoveHandler(event) {
        const rect = listbd.value.getBoundingClientRect();
        const y = event.clientY - rect.top;
        const middleY = y - halfSliderHeight;

        y + halfSliderHeight > blineHeight ? sliderStyleTop = blineHeight - sliderHeight :
            y - halfSliderHeight < 0 ? sliderStyleTop = 0 : sliderStyleTop = middleY;
        const scrollRatio = sliderStyleTop / effientBlineHeight;

        listbdc.value.scrollTop = totalMenuElemHeight * scrollRatio;

        slider.value.style.top = sliderStyleTop + 'px';
    };

    function lyricMousemoveHandler(event) {
        const rect = listbd.value.getBoundingClientRect();
        const y = event.clientY - rect.top;

        const middleY = y - halfLyricSliderHeight;

        y + halfLyricSliderHeight > lyricBlineHeight ? lyricSliderStyleTop = lyricBlineHeight - lyricSliderHeight :
            y - halfLyricSliderHeight < 0 ? lyricSliderStyleTop = 0 : lyricSliderStyleTop = middleY;
        const scrollRatio = lyricSliderStyleTop / effientLyricBlineHeight;

        listlyric.value.scrollTop = totalLyricContentHeight * scrollRatio;

        lyricSlider.value.style.top = lyricSliderStyleTop + 'px';
    };


    function mouseupHandler() {
        listbd.value.removeEventListener('mousemove', mousemoveHandler);
        document.body.removeEventListener('mouseup', mouseupHandler);
    }

    function lyricMouseUpHandler() {
        listbd.value.removeEventListener('mousemove', lyricMousemoveHandler);
        document.body.removeEventListener('mouseup', lyricMouseUpHandler);
    }

    slider.value.addEventListener('mousedown', function (event) {
        event.preventDefault(); //prevent text selected
        listbd.value.addEventListener('mousemove', mousemoveHandler);
        document.body.addEventListener('mouseup', mouseupHandler);
    })

    lyricSlider.value.addEventListener('mousedown', function (event) {
        event.preventDefault(); //prevent text selected
        listbd.value.addEventListener('mousemove', lyricMousemoveHandler);
        document.body.addEventListener('mouseup', lyricMouseUpHandler);
    })

    listbdc.value.addEventListener('wheel', function (event) {
        event.preventDefault();

        const scrollTop = sliderStyleTop + event.deltaY / 10;

        scrollTop + sliderHeight > blineHeight ? sliderStyleTop = blineHeight - sliderHeight :
            scrollTop < 0 ? sliderStyleTop = 0 : sliderStyleTop = scrollTop;
        const scrollRatio = sliderStyleTop / effientBlineHeight;

        listbdc.value.scrollTop = totalMenuElemHeight * scrollRatio;

        slider.value.style.top = sliderStyleTop + 'px';
    })

    listlyric.value.addEventListener('wheel', function (event) {
        event.preventDefault();

        const scrollTop = lyricSliderStyleTop + event.deltaY / 10;

        scrollTop + lyricSliderHeight > lyricBlineHeight ? lyricSliderStyleTop = lyricBlineHeight - lyricSliderHeight :
            scrollTop < 0 ? lyricSliderStyleTop = 0 : lyricSliderStyleTop = scrollTop;
        const scrollRatio = lyricSliderStyleTop / effientLyricBlineHeight;

        listlyric.value.scrollTop = totalLyricContentHeight * scrollRatio;

        lyricSlider.value.style.top = lyricSliderStyleTop + 'px';
    })


    console.log(lyricPhs);

    watch(() => currentPlayLyricIndex.value, function () {
        let needMoveSize = 0;

        for (let j = 2; j < currentPlayLyricIndex.value; j++) {
            needMoveSize += lyricPhs[j];
        }

        const sliderTopRatio = needMoveSize / totalLyricContentHeight;
        lyricSliderStyleTop = effientLyricBlineHeight * sliderTopRatio;

        listlyric.value.scrollTo({
            top: needMoveSize,
            behavior: "smooth"
        })

        lyricSlider.value.style.top = lyricSliderStyleTop + 'px';
    })



})







</script>
<style lang="scss" scoped>
.list {
    position: absolute;
    left: 50%;
    bottom: 47px;
    width: 986px;
    height: 301px;
    margin-left: -493px;

    .ico {
        height: 16px;
    }

    .listhd,
    .listbd {
        padding: 0 5px;
    }

    .listhd {
        background-position: 0 0;
        height: 41px;

        .listhdc {
            position: relative;
            height: 40px;

            h4 {
                position: absolute;
                left: 25px;
                top: 0;
                height: 39px;
                line-height: 39px;
                font-size: 14px;
                color: #e2e2e2;
            }

            a {
                color: #ccc;
            }

            .ico {
                float: left;
                margin: 1px 6px 0 0;
                height: 16px;
            }



            .clear,
            .addall {
                position: absolute;
                left: 490px;
                top: 12px;
                height: 15px;
                line-height: 15px;
                cursor: pointer;
            }

            .addall {
                left: 398px;

                &:hover {
                    .ico-add {
                        background-position: -24px -20px;
                    }
                }

                .ico-add {
                    width: 16px;
                    background-position: -24px 0;

                    &:hover {
                        background-position: -24px -20px;
                    }
                }
            }

            .line {
                position: absolute;
                top: 13px;
                left: 477px;
                height: 15px;
                border-left: 1px solid #000;
                border-right: 1px solid #2c2c2c;
            }

            .clear {
                &:hover {
                    .icn-del {
                        background-position: -51px -20px;
                    }
                }

                .icn-del {
                    width: 13px;
                    background-position: -51px 0;

                    &:hover {
                        background-position: -51px -20px;
                    }
                }
            }

            .lytit {
                position: absolute;
                left: 595px;
                top: 0;
                width: 346px;
                text-align: center;
                height: 39px;
                line-height: 39px;
                color: #fff;
                font-size: 14px;
            }

            .close {
                position: absolute;
                top: 6px;
                right: 8px;
                width: 30px;
                height: 30px;
                overflow: hidden;
                text-indent: -999px;
                cursor: pointer;
                background-position: -195px 9px;

                &:hover {
                    background-position: -195px -21px;
                }
            }
        }
    }

    .listbd {
        position: absolute;
        left: 0;
        top: 41px;
        width: 976px;
        height: 260px;
        overflow: hidden;
        background-position: -1014px 0;
        background-repeat: repeat-y;

        .imgbg {
            position: absolute;
            left: 2px;
            top: -1px;
            z-index: 1;
            width: 980px;
            height: auto;
            opacity: .2;
        }

        .msk {
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 2;
            width: 558px;
            height: 260px;
            background-color: #121212;
            opacity: .5;
        }

        .listbdc {
            position: absolute;
            left: 2px;
            top: 0;
            z-index: 4;
            height: 260px;
            width: 553px;
            overflow: hidden;

            ul {
                overflow: hidden;
                color: #ccc;

            }
        }

        .bline {
            position: absolute;
            left: 555px;
            top: -1px;
            z-index: 2;
            width: 6px;
            height: 260px;
            background: #000;
            opacity: .5;

            .scrol {
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                border-radius: 5px;
                height: 100px;
                cursor: pointer;
                background: #868686;
                border: 1px solid #a6a6a6;
                opacity: .8;
            }
        }

        .ask {
            position: absolute;
            right: 25px;
            top: 12px;
            cursor: pointer;
            z-index: 5;

            .ico-ask {
                display: inline-block;
                width: 21px;
                height: 21px;
                background-position: 0 -50px;
                text-indent: 0;

                &:hover {
                    background-position: -24px -50px;
                }
            }

        }

        .upload {
            position: absolute;
            right: 12px;
            top: 40px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, .75);
            width: 81px;
            z-index: 5;


            a {
                display: block;
                text-align: center;
                padding: 8px 0;
                color: #666;
                background: #ebebeb;
                text-shadow: 0 1px 0 #fff;

                &:hover {
                    text-decoration: none;
                    background: #dedede;
                }
            }
        }

        .msk2 {
            position: absolute;
            left: 560px;
            top: 0;
            z-index: 3;
            width: 420px;
            height: 250px;
            background: #121212;
            opacity: .01;
        }

        .listlyric {
            position: absolute;
            right: 40px;
            top: 0;
            z-index: 4;
            margin: 21px 0 20px 0;
            height: 219px;
            width: 354px;
            overflow: hidden;

            p {
                color: #989898;
                word-wrap: break-word;
                text-align: center;
                line-height: 32px;
                height: auto !important;
                min-height: 32px;
                -webkit-transition: color 0.7s linear;
                transition: color 0.7s linear;

                &.z-sel {
                    color: #fff;
                    font-size: 14px;
                }
            }


        }

        .bline-1 {
            left: auto;
            right: 2px;

            .scorl {
                left: auto;
                right: 0;

            }
        }
    }

    ul {
        color: #ccc;

        li.z-sel {
            background-color: rgba(0, 0, 0, 0.3);

            .col {
                color: #fff;

                a {
                    color: #fff;
                }
            }

            .playicn {
                display: block;
            }

        }

        li {
            float: left;
            width: 100%;

            .playicn {
                display: none;
                margin-top: 8px;
                width: 10px;
                height: 13px;
                background-position: -182px 0;
            }

            .col {
                float: left;
                padding-left: 10px;
                height: 28px;
                line-height: 28px;
                overflow: hidden;
                cursor: pointer;

                a {
                    color: #9b9b9b;
                }

                .icns {
                    display: none;
                    position: absolute;
                    right: 0;
                    top: 0;
                    width: 100px;
                    height: 23px;
                }

                .ico {
                    float: right;
                    overflow: hidden;
                    margin: 7px 0 0 10px;
                    text-indent: -9999px;
                }
            }

            &:hover {
                background-color: rgba(0, 0, 0, 0.4);

                .col {
                    color: #fff;

                    a {
                        color: #fff;
                    }
                }

                .icns {
                    display: block;
                }
            }

            .col-1 {
                width: 10px;
            }

            .col-2,
            .col-4 {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .col-2 {
                width: 256px;
            }

            .col-3 {
                width: 78px;
                position: relative;

                .icn-del {
                    width: 13px;
                    background-position: -51px 0;

                    &:hover {
                        background-position: -51px -20px;
                    }
                }

                .ico-dl {
                    width: 14px;
                    background-position: -57px -50px;

                    &:hover {
                        background-position: -80px -50px;
                    }
                }

                .ico-share {
                    width: 14px;
                    background-position: 0 0;

                    &:hover {
                        background-position: 0 -20px;
                    }
                }

                .ico-add {
                    width: 16px;
                    background-position: -24px 0;

                    &:hover {
                        background-position: -24px -20px;
                    }
                }

            }

            .col-4 {
                width: 70px;
            }

            .col-5 {
                width: 35px;
            }

            .col-6 {
                width: 37px;
                padding-left: 6px;

                .ico-src {
                    width: 14px;
                    margin-left: 0;
                    background-position: -80px 0;

                    &:hover {
                        background-position: -80px -20px;
                    }
                }
            }
        }
    }



}
</style>